<template>
  <vue-draggable-resizable
    class="region-search"
    v-if="visible"
    :resizable="false"
    :x="0"
    :y="0"
    :w="500"
    :h="400"
    :z="2001">
    <el-card :body-style="{padding: '20px 10px'}" shadow="always" class="search-card">
      <div slot="header" class="search-header">
        <span>高级搜索</span>
        <div style="float:right; padding:3px 0">
          <el-button
            v-if="bodyVisible"
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-upload2"
          >折叠</el-button>

          <el-button
            v-else
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-download"
          >展开</el-button>
          <el-button style="padding:0" type="text" @click="close()">关闭搜索</el-button>
        </div>
      </div>

      <div class="search-body" v-if="bodyVisible">
        <el-form :model="searchForm" ref="searchForm" label-width="100px">
          <el-form-item label="区域名称">
            <el-input v-model="searchForm.areaName" placeholder="区域名称" clearable />
          </el-form-item>

          <el-form-item label="部门">
            <el-cascader
              filterable
              clearable
              :options="formProps.deptTree"
              v-model="deptIds"
              :props="{
                  label: 'name',
                  value: 'id',
                  checkStrictly: true
                }"
              style="width:100%">
              <template slot-scope="{node, data}">
                <span>{{ data.name }}</span>
              </template>
            </el-cascader>
          </el-form-item>

          <el-form-item label="负责人">
            <el-input v-model="searchForm.realname" clearable placeholder="姓名" />
          </el-form-item>

          <el-form-item label="身份证">
            <el-input v-model="searchForm.identityCard" clearable placeholder="身份证" />
          </el-form-item>

          <el-form-item>
            <el-button @click="doSearch()" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
  name: 'RegionSearch',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      visible: false,
      bodyVisible: true,
      searchForm: {
        areaName: '',
        deptId: '',
        identityCard: '',
        realname: ''
      },
      deptIds: []
    }
  },
  methods: {
    async doSearch () {
      this.$emit('onSearched', this.searchForm)
    },
    open () {
      this.$store.dispatch('user/loadDeptList')
      this.visible = true
      this.$nextTick(() => this.$refs.searchForm.resetFields())
    },
    close () {
      // this.$emit('onCancel')
      this.visible = false
      this.deptIds = []
      this.searchForm = {}
      this.$emit('onSearched', this.searchForm)
    },
    toggleBody () {
      this.bodyVisible = !this.bodyVisible
    }
  },
  computed: {
    formProps () {
      return {
        deptTree: this.$store.getters['user/deptTree']
      }
    }
  },
  watch: {
    'deptIds' (val) {
      if (val && val.length > 0) {
        this.searchForm.deptId = val[val.length - 1]
      } else {
        this.searchForm.deptId = null
      }
    }
  }
}
</script>

<style lang="less">
.region-search {
  position: absolute;
  border: none;

  .search-card {
    .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
